<template>
  <com-header title="分类" :back="'/home'"></com-header>
  <van-config-provider :theme-vars="themeVars">
  <van-tree-select
    v-model:main-active-index="activeIndex"
    height="100vh"
    :items="items"
    @click-nav="changeItem"
  >
    <template #content>
      <van-row class="padded-10">
        <van-col :span="8" class="text-center p-b-10" v-for="item in content" :key="item">
          <van-icon name="bookmark" color="#1baeae" size="18"/>
          <div class="van-ellipsis">{{item}}</div>
        </van-col>
      </van-row>
      <van-empty description="暂无数据"  v-if="!content.length && !loading" />
    </template>
  </van-tree-select>
  </van-config-provider>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import {fnGetCategory, fnGetList} from '@/service/index'
// import type {IList} from '@/api/type'
export default defineComponent({
  setup() {
    const activeIndex = ref(0), items = ref<any>([]), content = ref<any>([]), loading = ref<boolean>(false);
    const themeVars = {
      badgeBackgroundColor: '#1baeae',
      sidebarSelectedBorderColor: '#1baeae'
    };
    const fnGetListData = () => {
      loading.value = true
      fnGetList({ p: 1,n: 50, type: 1, category: activeIndex.value+1, downtype: "", puttype: "", sort: ""}).then(res => {
        console.log(res)
        loading.value = false;
        if (res && res.data) {
          content.value = res.data.map((item:any) => item.name)
        } else {
          content.value = []
        }
      })
    }
    const changeItem = (e: number) => {
      console.log(e)
      activeIndex.value = e;
      fnGetListData();
    }
    onMounted(() => {
      fnGetCategory().then(res => {
        console.log(res)
        if (res) {
          items.value = res.data.map((item: any) => { 
            let obj = {text: item.name};
            return obj;
          });
          fnGetListData();
        }
      })
    })
    return {
      activeIndex,
      themeVars,
      items,
      content,
      changeItem,
      loading
    };
  },
});
</script>

